<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单选-复选</title>
  </head>
  <body>
    <div id="app">
      <!-- 单选 -->
      <input type="radio" v-model="picked" :value="value" />
      <label>单选按钮</label>
      <p>{{ picked }}</p>
      <p>{{ value }}</p>

      <!-- 复选 -->
      <input
        type="checkbox"
        v-model="toggle"
        :true-value="value1"
        :false-value="value2"
      />
      <label>复选框</label>
      <p>{{toggle}}</p>
      <p>{{value1}}</p>
      <p>{{value2}}</p>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        picked: false,
        value: 123,
        toggle: false,
        value1: "a",
        value2: "b"
      }
    })
  </script>
</html>
